<template>
  <view class="container">

    <!-- 修改密码区域 -->
    <view class="option-item" @click="goToChangePassword">
      <image class="icon" src="/static/lock.png" mode="aspectFit"></image>
      <text class="option-text">修改密码</text>
    </view>

    <!-- 分隔线 -->
    <!--<view class="divider"></view>-->

    <!-- 修改手机号区域 -->
	<!--
    <view class="option-item" @click="goToChangePhone">
      <image class="icon" src="/static/phone.png" mode="aspectFit"></image>
      <text class="option-text">修改手机号</text>
    </view>
	-->
	
	<!-- 分隔线 -->
	<view class="divider"></view>
	<!-- 修改密码区域 -->
	<view class="option-item" @click="goToChangePayPassword">
	  <image class="icon" src="/static/lock.png" mode="aspectFit"></image>
	  <text class="option-text">修改支付密码</text>
	</view>
	
  </view>
</template>

<script>
export default {
  methods: {
    // 跳转到修改密码页面
    goToChangePassword() {
      uni.navigateTo({
        url: '/pages/user/changePassword/changePassword'
      });
    },
	// 跳转到修改支付密码页面
	goToChangePayPassword() {
	  uni.navigateTo({
	    url: '/pages/user/changePayPassword/changePayPassword'
	  });
	},
    // 跳转到修改手机号页面
    goToChangePhone() {
      uni.navigateTo({
        url: '/pages/user/changePhone/changePhone'
      });
    }
  }
};
</script>

<style>
/* 页面容器 */
.container {
  background-color: #ffffff;
  height: 100vh;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

/* 页面标题 */
.header {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding: 20px 0;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

/* 选项区域 */
.option-item {
  display: flex;
  align-items: center;
  padding: 40px 20px;
  justify-content: center;
  flex-direction: column;
}

.icon {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  opacity: 0.5; /* 图标半透明 */
}

.option-text {
  font-size: 16px;
  color: #333;
}

/* 分隔线 */
.divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 0 40px;
}
</style>
